<template>
    <div class="p-2">
        <searchrevealing>
            <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="98px">
                <el-form-item label="商品名称" prop="styleName">
                    <el-input v-model="queryParams.styleName" placeholder="请输入" clearable style="width: 220px"
                        @keyup.enter="handleQuery" />
                </el-form-item>
                <el-form-item label="类目" prop="categoryIdList">
                    <el-cascader v-model="queryParams.categoryIdList" clearable :options="categoryProps" filterable
                        collapse-tags :props="props" style="width: 220px" placeholder="请选择类目" ref="categoryRef" />
                </el-form-item>
                <el-form-item label="69/商品编码" prop="content">
                    <el-input v-model="queryParams.content" placeholder="请输入" clearable style="width: 220px"
                        @keyup.enter="handleQuery" />
                </el-form-item>
                <el-form-item label="选品部门" prop="coreDeptId">
                    <el-select style="width: 220px" v-model="queryParams.coreDeptId" placeholder="请选择" clearable
                        filterable>
                        <el-option v-for="dict in anchorList" :key="dict.deptId" :label="dict.deptName"
                            :value="dict.deptId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="补样状态" prop="sampleStatus">
                    <el-select style="width: 220px" v-model="queryParams.sampleStatus" placeholder="请选择" clearable
                        filterable>
                        <el-option v-for="dict in sampleStatusList" :key="dict.deptId" :label="dict.deptName"
                            :value="dict.deptId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="入库时间" prop="outTimeArray">
                    <el-date-picker value-format="YYYY-MM-DD" v-model="queryParams.outTimeArray" type="daterange"
                        range-separator="~" start-placeholder="开始时间" end-placeholder="结束时间" clearable
                        style="width: 220px" />
                </el-form-item>
                <el-form-item label="邀约时间" prop="cycleTimeArray">
                    <el-date-picker value-format="YYYY-MM-DD" v-model="queryParams.cycleTimeArray" type="daterange"
                        range-separator="~" start-placeholder="开始时间" end-placeholder="结束时间" clearable
                        style="width: 220px" />
                </el-form-item>
                <el-form-item label="供应商" prop="supplierId">
                    <el-select v-model="queryParams.supplierId" placeholder="请选择供应商" clearable filterable
                        v-selectLoad="selectLoad" :teleported="false" :fit-input-width="true" remote
                        :remote-method="searchQuery" class="supplierSelect" style="width: 220px"
                        :loading="supplierQueryLoading" @clear="handleClear">
                        <el-option v-for="dict in supplierNameOptions" :key="dict.value" :label="dict.label"
                            :value="dict.value">
                        </el-option>
                        <template v-if="supplierLoading">
                            <div class="supplierSelect_icon">
                                <el-icon class="el-select-loading__icon">
                                    <Loading />
                                </el-icon>
                                <span class="el-select-loading__tips">{{ "正在加载" }}</span>
                            </div>
                        </template>
                        <template #loading>
                            <svg class="circular" viewBox="0 0 50 50">
                                <circle class="path" cx="25" cy="25" r="20" fill="none" />
                            </svg>
                        </template>
                    </el-select>
                </el-form-item>
                <el-form-item label="库存编码" prop="stockCode">
                    <el-input v-model="queryParams.stockCode" placeholder="请输入库存编码" clearable style="width: 220px"
                        @keyup.enter="handleQuery" />
                </el-form-item>
            </el-form>
            <div class="form_button">
                <el-button type="primary" @click="handleQuery" :loading="queryLoading">查询</el-button>
                <el-button @click="resetQuery" :loading="queryLoading">重置</el-button>
            </div>
        </searchrevealing>
        <el-card shadow="never">
            <template #header>
                <el-row :gutter="10" class="mb8">
                    <el-col :span="1.5">
                        <el-button type="primary" @click="batchWarehousingClick"
                            :disabled="ids.length == 0">批量入库</el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-button type="primary" @click="batchRefuseClick" :disabled="ids.length == 0">批量拒绝</el-button>
                    </el-col>
                </el-row>
                <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :name="'产品部补样管理'"
                    @updateColumn="getColmun"></right-toolbar>
            </template>
            <el-table v-loading="loading" :data="selectionRecordList" border @header-dragend="dragEnd"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column v-for="(item, index) in outBoundRecordColumns" :key="index" :label="item.label"
                    align="center" :prop="item.prop" show-overflow-tooltip :fixed="item.fixed" :width="item.width">
                    <template #default="scope">
                        <image-preview v-if="item.prop == 'productImage'" :src="scope.row.productImage" :width="50"
                            :height="50" />
                        <span v-if="item.prop == 'sampleNum'">{{ Number(scope.row.sampleNum) }}
                        </span>
                        <span v-if="item.prop == 'inStockNum'">{{ Number(scope.row.inStockNum) }}
                        </span>
                        <span v-if="item.prop == 'brandName'">{{ scope.row.brandVo?.brandName }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
                    <template #default="scope">
                        <el-button link type="primary" @click="handleRespond(scope.row)" class="color_theme"
                            v-if="scope.row.sampleStatus == 0" style="margin-left: 0px !important">响应邀约</el-button>
                        <el-button link type="primary" @click="handleRefuse(scope.row)" class="color_theme"
                            v-if="scope.row.sampleStatus == 0" style="margin-left: 0px !important">拒绝响应</el-button>
                        <el-button link type="primary" @click="handleInspect(scope.row)" class="color_theme"
                            v-if="scope.row.sampleStatus == 1 && !scope.row.isSkip"
                            style="margin-left: 0px !important">查看物流</el-button>
                        <el-button link type="primary" @click="handleConfirm(scope.row)" class="color_theme"
                            v-if="scope.row.sampleStatus == 1" style="margin-left: 0px !important">确认入库</el-button>
                        <el-button link type="primary" @click="handleReason(scope.row)" class="color_theme"
                            v-if="scope.row.sampleStatus == 2" style="margin-left: 0px !important">查看原因</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize" @pagination="paginationChange" :leftText="statisticsText" />
        </el-card>


        <!-- 响应邀约 -->
        <mailed :expressDeliveryDialogVisible="expressDeliveryDialogVisible" :id="expressDeliveryDialogData?.id"
            :productId="expressDeliveryDialogData?.productId" :isSample="true" @close="expressDeliveryClose"
            @submit="expressDeliverySubmit">
        </mailed>
        <!-- 拒绝响应 -->
        <el-dialog v-model="offShelfDialogVisible" title="拒绝原因" width="500" :close-on-press-escape="false"
            :before-close="offShelBeforeClose">
            <el-form ref="offShelRef" :model="offShelform" style="width: 100%" :inline="true" :rules="offShelrules"
                label-width="90px">
                <el-row class="hm-row3" :gutter="60">
                    <el-col :span="24">
                        <el-form-item label="拒绝原因" prop="reason">
                            <el-input v-model="offShelform.reason" placeholder="请输入50字符以内" clearable :rows="4"
                                style="width: 350px;" maxlength="50" type="textarea" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="offShelBeforeClose">取消</el-button>
                    <el-button :loading="downLoading" type="primary" @click="handleSave(offShelRef)">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 查看原因 -->
        <el-dialog v-model="sampleInvitationDialogVisible" title="拒绝原因" width="500" :close-on-press-escape="false"
            :before-close="sampleBeforeClose">
            <el-form ref="sampleInvitationRef" :model="sampleInvitationform" style="width: 100%" :inline="true"
                label-width="90px">
                <el-row class="hm-row3" :gutter="60">
                    <el-col :span="24">
                        <el-form-item label="填写时间：" prop="time">
                            <span>{{ sampleInvitationDialogData?.refuseTime }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="拒绝原因：" prop="reson">
                            <span class="reson">{{ sampleInvitationDialogData?.sampleRemark }}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="sampleBeforeClose">取消</el-button>
                    <el-button :loading="downLoading" type="primary" @click="sampleBeforeClose">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 物流信息 -->
        <el-drawer v-model="logisticsInfoVisible" title="物流信息" direction="rtl" size="50%" :close-on-click-modal="false"
            icon="">
            <div class="logisticsContent">
                <div>快递公司: {{ shippingCompany }}</div>
                <div style="margin-top: 20px; margin-bottom: 50px">快递单号: {{ trackingNumber }}</div>
                <div style="overflow-y: auto;">
                    <el-steps direction="vertical">
                        <el-step v-for="(item, index) in logisticsTraceDetailList" :key="index">
                            <template #icon>
                                <div class="custom-icon" :class="{ 'active': 0 === index }"></div>
                            </template>
                            <template #title>
                                <div :style="{ 'color': item.logisticsStatus === 'SIGN' ? '#1890FF' : 'black' }">
                                    <span style="margin-right: 10px;font-size: 20px">{{
                                        statusFormat(item.logisticsStatus) }}</span>
                                    <span>{{ formatTimestamp(item.time) }}</span>
                                </div>
                            </template>
                            <template #description>
                                <div v-html="highlightPhoneNumbers(item.desc)"
                                    style="margin-bottom: 20px; color: black"></div>
                            </template>
                        </el-step>
                    </el-steps>
                </div>
            </div>
        </el-drawer>
        <!-- 确认入库 -->
        <el-dialog v-model="confirmWarehouseVisible" title="确认入库" width="1100" :close-on-press-escape="false"
            :before-close="confirmWarehouseBeforeClose">
            <div class="p-2 red_color">注：【照片留存】中请上传大小不超过30MB格式为png/jpg/jpeg的文件</div>
            <el-table :data="confirmWarehouseData" border :span-method="objectSpanMethod">
                <el-table-column prop="styleName" label="商品名称" align="center"></el-table-column>
                <el-table-column prop="productImage" label="商品主图" align="center">
                    <template #default="scope">
                        <image-preview :src="scope.row.productImage" :width="50" :height="50" />
                    </template>
                </el-table-column>
                <el-table-column prop="styleCode" label="69码" align="center"></el-table-column>
                <el-table-column prop="id" label="商品编码" align="center"></el-table-column>
                <el-table-column prop="stockCode" label="库存编码" align="center"></el-table-column>
                <el-table-column prop="locationName" label="货架号" align="center">
                    <template #default="scope">
                        <span>{{ scope.row.locationName }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="supplierName" label="供应商" align="center"></el-table-column>
                <el-table-column prop="sampleNums" label="入库数量" align="center" width="200">
                    <template #default="scope">
                        <el-input-number v-model="scope.row.sampleNums" :min="1" :max="999"/>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pic-box">
                <div class="label">照片留存（最多5张）：</div>
                <div>
                    <ImageUploadDrags v-model="keepImage" :limit="5" :format="true" :isType="true" :size="'smaller'" />
                </div>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="confirmWarehouseBeforeClose">取消</el-button>
                    <el-button :loading="downLoading" type="primary" @click="confirmWarehouseSave">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup name="OutBoundRecord" lang="ts">
import { OutBoundQueryParmas, OutBoundVO } from '@/api/group/productOutbound/types'
import { getSampleInvitationList, refuseResPond, batchStorage } from '@/api/group/productOutbound'
import { queryOperationDeptList } from '@/api/group/productSelectionPricing'
import { categoryList } from '@/api/system/supplierAddProducts';
import { removeInvalidNodes } from '@/utils/index';
import { loginSupplierList } from '@/api/group/supplier/index';
import type { FormInstance } from 'element-plus';
import { getLogisticsTraceDetailList } from '@/api/group/product'
import mailed from '@/views/group/investDepartment/commodityManage/components/mailed.vue'
const { proxy } = getCurrentInstance() as any;
const selectionRecordList = ref<OutBoundVO[]>([]);
const loading = ref(true);
const total = ref(0);
const statisticsText = ref('')
const showSearch = ref(true);
const queryFormRef = ref<ElFormInstance>();
const anchorList = ref<{ deptName: string; deptId: string }[]>([]);
const columnData = ref()
const sampleStatusList = ref<{ deptName: string; deptId: string }[]>([
    { deptName: '响应中', deptId: '0' },
    { deptName: '已响应', deptId: '1' },
    { deptName: '已拒绝', deptId: '2' },
    { deptName: '已入库', deptId: '3' },
]);


const outBoundRecordColumns = ref()

const categoryProps = ref([]);
const props = { label: 'categoryName', value: 'categoryId', multiple: true }

// 响应邀约
const expressDeliveryDialogVisible = ref(false)
const expressDeliveryDialogData = ref()
// 拒绝响应
const downLoading = ref(false);
const offShelfDialogVisible = ref(false);
const offShelfDialogData = ref<any>([])
const offShelRef = ref<FormInstance>();
const offShelform = ref<{ reason?: string }>({
    reason: undefined
});
const offShelrules = ref({
    reason: [{ required: true, message: '拒绝原因不能为空', trigger: 'blur' }]
});
// 查看原因
const sampleInvitationDialogVisible = ref(false)
const sampleInvitationDialogData = ref();
const sampleInvitationRef = ref<FormInstance>();
const sampleInvitationform = ref({});
//物流名称
const shippingCompany = ref()
//物流单号
const trackingNumber = ref()
//物流轨迹
const logisticsTraceDetailList = ref<any>([])
// 物流信息显隐
const logisticsInfoVisible = ref(false)
// 确认入库
const confirmWarehouseVisible = ref(false)
// 确认入库商品
const confirmWarehouseData = ref<any>([])
const keepImage = ref('')

// 供应商
const supplierNameOptions = ref<any[]>([]);
const supplierNameDate = ref({
    pageNum: 1,
    pageSize: 10,
    supplierName: ''
});
const supplierQueryLoading = ref(false);
const supplierLoading = ref(true);
const supplierNametotal = ref();
const ids = ref<Array<any>>([]);

const queryLoading = ref(false)

const queryParams = ref<OutBoundQueryParmas>({
    pageNum: 1,
    pageSize: 10,
    styleName: undefined,
    categoryIdList: [],
    content: undefined,
    coreDeptId: undefined,
    sampleStatus: undefined,
    outTimeArray: [],
    inStartTime: '',
    inEndTime: '',
    cycleTimeArray: [],
    sampleStartTime: '',
    sampleEndTime: '',
    supplierId: undefined,
    stockCode: undefined,
})
// 查询类目
const getCategoryList = async () => {
    const { data = [] } = await categoryList({});
    categoryProps.value = removeInvalidNodes(data, 'categoryStatus');
};
// 获取选品部门
const getAnchor = async () => {
    const res = await queryOperationDeptList()
    anchorList.value = res.data
}
/** select懒加载 */
const selectLoad = async () => {
    if (supplierNameOptions.value.length < supplierNametotal.value) {
        supplierNameDate.value.pageNum++;
        getHmSupplierList();
    }
};
// 获取供应商列表
const getHmSupplierList = async () => {
    supplierLoading.value = true;
    const res = await loginSupplierList(supplierNameDate.value);
    const reshandle = res.rows.map((item: any) => ({
        label: item.supplierName,
        value: item.id
    }));
    supplierNameOptions.value.push(...reshandle);
    supplierNametotal.value = res.total;
    supplierLoading.value = false;
};
/** 远程搜索 */
const searchQuery = async (query: string) => {
    supplierQueryLoading.value = true;
    supplierNameOptions.value = [];
    supplierNameDate.value.pageNum = 1;
    supplierNameDate.value.pageSize = 10;
    supplierNameDate.value.supplierName = query;
    await getHmSupplierList();
    supplierQueryLoading.value = false;
};
/** 清空供应商 */
const handleClear = () => {
    supplierNameDate.value.supplierName = '';
    supplierNameOptions.value = [];
    supplierNameDate.value.pageNum = 1;
    supplierNameDate.value.pageSize = 10;
    getHmSupplierList();
};
/** 多选框选中数据 */
const handleSelectionChange = (selection: any[]) => {
    ids.value = selection;
};
/** 查询列表 */
const getList = async () => {
    try {
        loading.value = true;
        if (queryParams.value.outTimeArray && queryParams.value.outTimeArray.length) {
            queryParams.value.inStartTime = queryParams.value.outTimeArray[0]
            queryParams.value.inEndTime = queryParams.value.outTimeArray[1]
        } else {
            queryParams.value.inStartTime = ''
            queryParams.value.inEndTime = ''
        }
        if (queryParams.value.cycleTimeArray && queryParams.value.cycleTimeArray.length) {
            queryParams.value.sampleStartTime = queryParams.value.cycleTimeArray[0]
            queryParams.value.sampleEndTime = queryParams.value.cycleTimeArray[1]
        } else {
            queryParams.value.sampleStartTime = ''
            queryParams.value.sampleEndTime = ''
        }
        const res = await getSampleInvitationList(queryParams.value);
        (selectionRecordList.value as any) = res.rows;
        total.value = res.total;
        statisticsText.value = res.msg || ''
        loading.value = false;
        queryLoading.value = false
    } catch (e) {
    } finally {
        loading.value = false;
    }
};
/** 搜索按钮操作 */
const handleQuery = () => {
    queryLoading.value = true
    queryParams.value.pageNum = 1;
    getList();
};
/** 重置按钮操作 */
const resetQuery = () => {
    queryFormRef.value?.resetFields();
    handleQuery();
};
/** 响应邀约 */
const handleRespond = async (row: any) => {
    expressDeliveryDialogVisible.value = true
    expressDeliveryDialogData.value = row
}
/** 响应邀约关闭 */
const expressDeliveryClose = () => {
    expressDeliveryDialogVisible.value = false
    expressDeliveryDialogData.value = undefined
}
/** 响应邀约成功 */
const expressDeliverySubmit = async () => {
    expressDeliveryClose()
    await getList()
}
/** 拒绝响应 */
const handleRefuse = async (row: any) => {
    offShelfDialogVisible.value = true
    // 拒绝响应对应数据
    offShelfDialogData.value = [row]
}
/** 拒绝响应关闭 */
const offShelBeforeClose = () => {
    offShelRef.value?.resetFields();
    offShelfDialogVisible.value = false;
    offShelfDialogData.value = []
};
/** 拒绝响应提交 */
const handleSave = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            downLoading.value = true;
            try {
                const boList = offShelfDialogData.value.map((item: any) => {
                    return {
                        id: item.id,
                        productId: item.productId
                    }
                })
                await refuseResPond({ sampleRemark: offShelform.value.reason, boList })
                proxy?.$modal.msgSuccess('拒绝补样成功');
                offShelfDialogVisible.value = false;
                getList();
                formEl.resetFields();
                downLoading.value = false;
            } catch (err) {
                downLoading.value = false;
            }
        } else {
            console.log('error submit!', fields);
        }
    });
}
/** 查看物流 */
const handleInspect = async (row: any) => {
    //清理初始化数据
    logisticsTraceDetailList.value = []
    shippingCompany.value = row.expressCompany
    trackingNumber.value = row.expressNumber
    const res = await getLogisticsTraceDetailList({ orderNo: row.expressNumber, cpCode: row.logisticsType })
    if (res.data) {
        logisticsTraceDetailList.value = JSON.parse(res.data.trajectory).reverse()
    }
    logisticsInfoVisible.value = true
}
/** 查看物流状态转换 */
const statusFormat = (status: string) => {
    switch (status) {
        case "WAIT_ACCEPT":
            return "待揽收";
        case "ACCEPT":
            return "已揽件";
        case "TRANSPORT":
            return "运输中";
        case "DELIVERING":
            return "派件中";
        case "AGENT_SIGN":
            return "已代签收";
        case "SIGN":
            return "已签收";
        case "FAILED":
            return "包裹异常";
        default:
            return "未知状态";
    }
}
/** 时间格式转换 */
const formatTimestamp = (timestamp: number): string => {
    const date = new Date(timestamp); // 将时间戳转为 Date 对象

    // 获取各个时间部分
    const year = date.getFullYear(); // 获取年份
    const month = String(date.getMonth() + 1).padStart(2, '0'); // 获取月份（注意：月份从0开始，所以加1）
    const day = String(date.getDate()).padStart(2, '0'); // 获取日期
    const hours = String(date.getHours()).padStart(2, '0'); // 获取小时
    const minutes = String(date.getMinutes()).padStart(2, '0'); // 获取分钟
    const seconds = String(date.getSeconds()).padStart(2, '0'); // 获取秒数

    // 格式化并返回
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
/** 手机号匹配 */
const highlightPhoneNumbers = (text: any) => {
    // 正则表达式匹配手机号（中国常见手机号格式）
    const phoneRegex = /\b(\d{11})\b/g;

    // 使用 replace 方法，将匹配到的手机号替换为带有 red 样式的 span
    return text.replace(phoneRegex, (match: any) => {
        return `<span style="color: red; cursor: pointer;" @click="handlePhoneClick('${match}')">${match}</span>`;
    });
}

/** 确认入库-合并行 */
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }: any) => {
    if (columnIndex === 8) {
        return {
            rowspan: confirmWarehouseData.value.length,
            colspan: 1,
        }
    }
}
/** 确认入库 */
const handleConfirm = async (row: any) => {
    confirmWarehouseVisible.value = true
    row.sampleNums = row.sampleNum
    confirmWarehouseData.value = [row]
}
/** 确认入库-关闭 */
const confirmWarehouseBeforeClose = () => {
    confirmWarehouseVisible.value = false
    keepImage.value = ''
}
/** 确认入库-提交 */
const confirmWarehouseSave = async () => {
    const boList = confirmWarehouseData.value.map((item: any) => {
        return {
            id: item.id,
            productId: item.productId,
            inStockNum: item.sampleNums
        }
    })
    await batchStorage({
        keepImage: keepImage.value,
        boList
    })
    proxy?.$modal.msgSuccess('入库成功');
    keepImage.value = ''
    confirmWarehouseVisible.value = false;
    getList();
    downLoading.value = false;
}
/** 查看原因 */
const handleReason = async (row: any) => {
    sampleInvitationDialogData.value = row
    sampleInvitationDialogVisible.value = true
}
/** 查看原因关闭 */
const sampleBeforeClose = () => {
    sampleInvitationDialogVisible.value = false
    sampleInvitationDialogData.value = undefined
}
/** 批量入库 */
const batchWarehousingClick = () => {
    const allSampleStatusAreOne = ids.value.every(item => item.sampleStatus === 1);
    if (allSampleStatusAreOne) {
        confirmWarehouseVisible.value = true
        ids.value.forEach((element: any) => {
            element.sampleNums = element.sampleNum
        });
        confirmWarehouseData.value = ids.value
    } else {
        proxy?.$modal.confirm('您勾选的数据中有不符合入库条件的，请检查');
    }
}
/** 批量拒绝 */
const batchRefuseClick = () => {
    const allSampleStatusAreOne = ids.value.every(item => item.sampleStatus === 0);
    if (allSampleStatusAreOne) {
        offShelfDialogVisible.value = true
        // 拒绝响应对应数据
        offShelfDialogData.value = ids.value
    } else {
        proxy?.$modal.confirm('您勾选的数据中有不符合拒绝条件的，请检查');
    }
}

/** 获取colmun */
const getColmun = async () => {
    const columnDatas = await proxy?.useColumn('产品部补样管理')
    outBoundRecordColumns.value = columnDatas.columnCustom
    columnData.value = columnDatas
    queryParams.value.pageSize = columnDatas.columnPageSize || 10
}
/** 拖拽事件 */
const dragEnd = async (newWidth: number, oldWidth: number, column: any, event: MouseEvent) => {
    columnData.value.columnCustom.map((item: any) => {
        if (item.prop == column.property) {
            item.width = newWidth
        }
    })
    await proxy?.useColumnUpdate(columnData.value, queryParams.value.pageSize)
}
/** 页数变化 */
const paginationChange = async () => {
    await getList();
    await proxy?.useColumnUpdate(columnData.value, queryParams.value.pageSize)
    getColmun()
}
onMounted(async () => {
    queryParams.value.pageNum = 1;
    await getColmun();
    await getList();
    getAnchor();
    getCategoryList();
})

</script>
<style lang="scss" scoped>
.mb96 {
    margin-bottom: 96px;
}

:deep(.el-card__header) {
    display: flex;
    justify-content: flex-end;
}

.form_button {
    display: flex;
    justify-content: flex-end;
}

.supplierSelect {
    :deep(.el-popper) {
        left: 0 !important;
        top: 34px !important;
        z-index: 7000 !important;
        width: 100% !important;
    }
}

:deep(.el-tabs__content) {
    overflow: visible !important;
}

.supplierSelect_icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.el-select-loading__tips {
    color: #606266;
    font-size: 14px;
}

.logisticsContent {
    width: 100%;
    height: 100%;
    padding: 30px 30px 0 30px;
}

.custom-icon {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: white;
    /* 设置蓝色背景 */
    border: 1px #B0B0B0 solid;
}

.custom-icon.active {
    background-color: #1890FF;
    /* 激活状态时为蓝色实心 */
    border: none;
    /* 移除边框 */
}

.red_color {
    color: #FF0000;
}

.pic-box {
    width: 100%;
    display: flex;
    align-items: center;
    padding-top: 10px;

    .label {
        margin-right: 10px;
    }

}
.reson{
    word-break: break-all;
}
</style>